<div class="stock-container">
  <div class="watchlist-box" [@expandable]="outlookState.watchlist" (@expandable.done)="broadcastRender($event)">
    <watchlist-mini [routeSource]="'stock'"></watchlist-mini>
  </div>
  <div class="main-container">
    <div class="top-bar">
      <div class="left-part">
        <a href="javascript:;" class="drawer-toggle" [class.active]="outlookState.watchlist === 'EXPANDED'" (click)="toggleState('watchlist')" style="float: left">
          <i class="iconfont icon-left"></i>
        </a>
        <span *ngIf="!f10Test(isF10Source | async)" class="span-title">众赢指标</span>        
        <!-- 众赢投顾内部指标 -->
        <ul *ngIf="!f10Test(isF10Source | async)" id="zytgTarget" class="zytg-ul">
          <li *ngFor="let switcher of zytgSwitchersList" class="zytg-li" [class.active]="switcher.selected" id="{{switcher.key}}_li" [class.disabled]="switcher.disabled" (click)="onClick(switcher)">{{switcher.text}} <img *ngIf="!switcher.isShow" src="/static/images/chose_icon_lock.png"></li>
        </ul>
        <img src="/static/images/target.png" class="target-toggle" (click)="targetDropdown()">
        <!-- <img src="/static/images/target.png" class="target-toggle" (click)="zytgOnresize()"> -->
        <div id="dropdown">
          <ul class="dropdown-ul">
            <li *ngFor="let switcher of zytgSwitchersList" class="dropdown-li" [class.active]="switcher.selected" id="{{switcher.key}}_li" [class.disabled]="switcher.disabled"
              (click)="onClick(switcher)">{{switcher.text}}
              <img *ngIf="!switcher.isShow" src="/static/images/chose_icon_lock.png">
            </li>
          </ul>
        </div>
        <!-- <stock-top-bar *ngIf="!f10Test(isF10Source | async)"></stock-top-bar> -->
        
        <a class="drawer-toggle" [class.active]="outlookState.detail === 'EXPANDED'"  href="javascript:;" (click)="toggleState('detail')" style="float:right">
          <i class="iconfont icon-right"></i>
        </a>
        <a href="javascript:;" class="drawer-toggle" (click)="toggleToMax()" style="float: right">
          <img *ngIf="outlookState.all" src="/static/images/maximize.png" alt="" style="margin-top: 5px; width:16px;">
          <img *ngIf="!outlookState.all" src="/static/images/recover.png" alt="" style="margin-top: 5px; width:16px;">
        </a>
      </div>
      <div class="right-part" [class.active]="outlookState.detail !== 'EXPANDED'">
        <search></search>
        <!-- 隐藏右边栏按钮 *ngIf="!f10Test(isF10Source | async)" -->
        <!-- <a class="drawer-toggle" [class.active]="outlookState.detail === 'EXPANDED'" href="javascript:;" (click)="toggleState('detail')">
          <i class="iconfont icon-right"></i>
        </a> -->
      </div>
    </div>
    <div class="middle-box">
      <div class="left-wrapper">
        <div class="data-change" *ngIf="!f10Test(isF10Source | async)">
          <stock-top-bar></stock-top-bar> 
        </div>
        <div class="main-view">
          <stock-nav class="stock-nav">
            <tab-list [listData]="tabList" [isNavTab]="true" (tabClick)="handleTabClick($event)" baseUrl="./"></tab-list>
          </stock-nav>
          <div class="stock-content-view">
            <router-outlet></router-outlet>
          </div>
        </div>
        <!--<div class="info-box">-->
        <stock-combo *ngIf="getStockType(quoteDetailSource | async) === 0 && !f10Test(isF10Source | async)" [@bottom]="outlookState.bottom"
          (@bottom.done)="broadcastRender($event)" style="width: 100%" [stockSource]="stockParams" [stockType]="getStockType(quoteDetailSource | async)"></stock-combo>
        <!--</div>-->
      </div>
      <!-- 隐藏右边栏按钮 *ngIf="!f10Test(isF10Source | async)" -->
      <div class="detail-box" [@expandable]="outlookState.detail" (@expandable.done)="broadcastRender($event)">
        <detail-basic [quoteSource]="quoteDetailSource" [placementSource]="placeSource"></detail-basic>
        <bidask [quoteSource]="quoteDetailSource" *ngIf="getStockType(quoteDetailSource | async) === 0"></bidask>
        <stock-ts [stockSource]="stockParams" *ngIf="getStockType(quoteDetailSource | async) === 0"></stock-ts>
        <!--0 for stock, 1 for index, 2 for block-->
        <div class="stock-append-table" *ngIf="getStockType(quoteDetailSource | async) !== 0" [class.higher]="getStockType(quoteDetailSource | async) === 2">
          <quote-table [headers]="blockHeaders" [scrollable]="true" [options]="blockOptions" *ngIf="getStockType(quoteDetailSource | async) === 2"
            [updateEventSource]="blockSource"></quote-table>
          <quote-table [headers]="indexHeaders" [scrollable]="true" [options]="blockOptions" (quoteDblClick)="onDblClick($event)" *ngIf="getStockType(quoteDetailSource | async) == 1"
            [updateEventSource]="indexSource"></quote-table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="loader">
  <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
</div>